<div class="dbcontain">
    <div class=" tran3 imgcover banner _text_teriary"  style="background-image:url('./static/img/banner1.png')" >

        <div class="logowhite imgcontain"  style="background-image:url('./static/img/logo-white.png')"></div>
        <div class="slogen">最好的职业教育服务者</div>

    </div>
</div>

<div class="dbcontain _bg_dark ">
    <div class="limit-width m0auto tran3" >

        <div class="tabheader m0auto">

            <div class="borderline dib">
                <span class="activeline dib  tran5"></span>
            </div>

            <ul class="clearfix m0auto tc dib">
                <li class="tabitem p15 tran3 pull-left  active " data-swiper="hlw">
                    <p class="tabtitle">互联网</p>
                    <p class="tabsubtitle fs-xs">新职教 新实训</p>
                </li>
                <li class="tabitem p15 tran3 pull-left   "  data-swiper="xdjg"> 
                    <p class="tabtitle">现代加工</p>
                    <p class="tabsubtitle fs-xs">培养人才一才多用</p>
                </li>
                <li class="tabitem p15 tran3 pull-left   "  data-swiper="gyjqr"> 
                    <p class="tabtitle">工业机器人</p>
                    <p class="tabsubtitle fs-xs">职业教育解决方案</p>
                </li>
                <li class="tabitem p15 tran3 pull-left   "  data-swiper="xnyqc"> 
                    <p class="tabtitle">新能源汽车</p>
                    <p class="tabsubtitle fs-xs">未来新动力</p>

                </li>
                <li class="tabitem p15 tran3 pull-left   "  data-swiper="jmzz"> 
                    <p class="tabtitle">精密制造</p>
                    <p class="tabsubtitle fs-xs">专业求甑</p>
                </li>
            </ul>
        </div>

    </div>
</div>

<div class="dbcontain imgcover swiperbg" style="background-image:url('./static/img/swiperbg.jpg')">
    <div class="limit-width m0auto tran3" >

       <div class="swiperdiv animated fadeIn" id="hlw">

           <div class="swiperheader">
               <p class="swipertitle">01.互联网</p>
               <p class="swipersubtitle">新职教 新实训</p>
           </div>


            <div id="hlw-swiper" class="swiper-container ">
                <div class="swiper-wrapper">
                    <?php for ($i=1;$i<4;$i++) { ?>
                       <div class="swiper-slide">
                          <a class="goupgrade" href="javascript:void(0);">
                            <div class="swiper-item imgcover swiper-lazy clearfix tran3 wow fadeIn" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1" style="background-image:url(./static/img/hlw/<?php echo $i; ?>.jpg)" >
                            </div>
                          </a>
                       </div>
                    <?php } ?>
                </div>
                <div class="swiper-pagination "></div>
            </div>

       </div>

       <div class="swiperdiv animated fadeIn dn" id="xdjg">

           <div class="swiperheader">
               <p class="swipertitle">02.现代加工</p>
               <p class="swipersubtitle">培养人才一才多用</p>
           </div>

            <div id="xdjg-swiper" class="swiper-container ">
                <div class="swiper-wrapper">
                    <?php for ($i=1;$i<4;$i++) { ?>
                       <div class="swiper-slide">
                          <a class="goupgrade" href="javascript:void(0);">
                            <div class="swiper-item imgcover clearfix tran3 wow fadeIn" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1" style="background-image:url(./static/img/xdjg/<?php echo $i; ?>.jpg)">
                            </div>
                          </a>
                       </div>
                    <?php } ?>
                </div>
                <div class="swiper-pagination "></div>
            </div>


       </div>

       <div class="swiperdiv animated fadeIn dn" id="gyjqr">

           <div class="swiperheader">
               <p class="swipertitle">03.工业机器人</p>
               <p class="swipersubtitle">职业教育解决方案</p>
           </div>

            <div id="gyjqr-swiper" class="swiper-container ">
                <div class="swiper-wrapper">
                    <?php for ($i=1;$i<4;$i++) { ?>
                       <div class="swiper-slide">
                          <a class="goupgrade" href="javascript:void(0);">
                            <div class="swiper-item imgcover clearfix tran3 wow fadeIn" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1" style="background-image:url(./static/img/gyjqr/<?php echo $i; ?>.jpg)">
                            </div>
                          </a>
                       </div>
                    <?php } ?>
                </div>
                <div class="swiper-pagination "></div>
            </div>

       </div>

       <div class="swiperdiv animated fadeIn dn" id="xnyqc">

           <div class="swiperheader">
               <p class="swipertitle">04.新能源汽车</p>
               <p class="swipersubtitle">未来新动力</p>
           </div>

            <div id="xnyqc-swiper" class="swiper-container ">
                <div class="swiper-wrapper">
                    <?php for ($i=1;$i<4;$i++) { ?>
                       <div class="swiper-slide">
                          <a class="goupgrade" href="javascript:void(0);">
                            <div class="swiper-item imgcover clearfix tran3 wow fadeIn" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1" style="background-image:url(./static/img/xnyqc/<?php echo $i; ?>.jpg)">
                            </div>
                          </a>
                       </div>
                    <?php } ?>
                </div>
                <div class="swiper-pagination "></div>
            </div>


       </div>
       <div class="swiperdiv animated fadeIn dn" id="jmzz">


           <div class="swiperheader">
               <p class="swipertitle">05.精密制造</p>
               <p class="swipersubtitle">专业求甑</p>
           </div>

            <div id="jmzz-swiper" class="swiper-container ">
                <div class="swiper-wrapper">
                    <?php for ($i=1;$i<4;$i++) { ?>
                       <div class="swiper-slide">
                          <a class="goupgrade" href="javascript:void(0);">
                            <div class="swiper-item imgcover clearfix tran3 wow fadeIn" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1" style="background-image:url(./static/img/jmzz/<?php echo $i; ?>.jpg)">
                            </div>
                          </a>
                       </div>
                    <?php } ?>
                </div>
                <div class="swiper-pagination "></div>
            </div>

       </div>

    </div>
</div>

<div class="dbcontain _bg_light">
    <div class="m0auto tran3 tr" >

        <div class="doubleslogen _text_secondary">
                <p class="chinesetitle">最好的职业教育服务者</p>
                <p class="englishtitle">Best professional education server</p>
        </div>

    </div>
</div>


<div class="dbcontain">
    <div class="m0auto tran3 tr" >

        <div class="video">
            <video  muted autoplay loop poster="./static/img/videoload.png" preload="auto" webkit-playsinline="true"  playsinline="true"  x-webkit-airplay="allow"  x5-video-player-type="h5"  x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill" >
               <source src="./static/img/video.mp4"  type="video/mp4">
               您的浏览器不支持播放视频
            </video> 
        </div>

    </div>
</div>




<style>


/*顶部图片*/
.banner{
    /*height:500px;*/
    padding:150px 0 ;

}

.banner .logowhite{

    height:150px;
    background-position: 25% 50%;

}

.banner .slogen{
    font-size:30px;
    text-align: right;
    padding-right:25%;
}


/*轮播图切换*/
.tabheader{
    position:relative;
    padding:10px 0;
}

.tabheader ul,.tabheader .borderline{
    width: 80%;
    margin-left:10%;
}

.tabheader  .tabitem{
   width:20%;
   cursor: pointer;
   color:#999;
}

.tabheader  .tabitem:hover{
    /*background:#333;*/
    color:#ccc;
}

.tabheader  .tabitem.active{
    /*background:#000;*/
    color:#eee;
}

.tabheader .borderline{
    height:9px;
    background:#000;
    padding:3px 0;
    margin-bottom:10px;
    border-radius:3px;
}
.tabheader .borderline .activeline{
    position: absolute;
    height:3px;
    border-radius:2px;
    background-color:#1e88e5;
    box-shadow:0 0 2px #ccc; 
    transform: scaleX(.9);
    -webkit-transform: scaleX(.9);
    -ms-transform: scaleX(.9);
}

.tabheader .tabitem .tabtitle{

}

.tabheader .tabitem .tabsubtitle{


}



/*轮播图部分*/
.swiperbg{
    position: relative;
    padding:50px 0;
}

.swiperbg .swiperheader{

    margin-bottom:50px;

}

.swiperbg .swiperheader .swipertitle{

    font-size: 30px;
}

.swiperbg .swiperheader .swipersubtitle{

}


/*最好的职业教育服务者*/
.doubleslogen{
    margin-top:20px;
    padding:10px 0;
}
.doubleslogen .chinesetitle{
    font-size: 30px;
}

.doubleslogen .englishtitle{


}


/*视频播放*/
.video{
    max-height:500px;
    overflow: hidden;
    margin-bottom:20px;
}



</style>

<script>

$(document).ready(function(){

    initTabitem();
    initHomeSwiper('hlw');
    initHomeSwiper('xdjg');
    initHomeSwiper('gyjqr');
    initHomeSwiper('xnyqc');
    initHomeSwiper('jmzz');


    $('.goupgrade').on('click',function(){

      window.location.href="./index.php?m=upgrade";

    })


    $('.tabitem').hover(

        function(){
            var that = $(this);

            var swiper = $(this).data('swiper');
            $('.swiperdiv').addClass('dn');
            $('#'+swiper).removeClass('dn');

            $('.tabitem').removeClass('active');
            that.addClass('active');

            var activeline = $('.tabheader .borderline .activeline');
            var width = $(this).innerWidth();
            var left = $(this).position().left;
            activeline.css({"left":left+'px',"width":width+'px'});

        },

        function(){
            // initTabitem();
            var that = $(this);
            var swiper = $(this).data('swiper');
            $('#'+swiper).removeClass('fadeIn'); //初次打开的时候渐显
        }

    )


})

function initHomeSwiper(id){

  var mySwiper = new Swiper ('#'+id+'-swiper', {
        autoplay: 3000,
        slidesPerView :3,
        centeredSlides: true,
        loop:true,
        lazyLoading : true,
        watchSlidesVisibility:true,
        observer:true,
        observeParents:true,
        pagination: {
          el: '.swiper-pagination',
          bulletElement : 'li',
          clickable:true
        },

        effect: 'coverflow', //3d滑动
        coverflow: {
            rotate: 0,  //设置为0
            stretch: 0,
            depth: 200,
            modifier: 2,
            slideShadows : true
        } 
    } ) ;


}


function initTabitem(){

    // var borderline = $('.tabheader .borderline');

    var tabheaderul = $('.tabheader>ul');

    var activeline = $('.tabheader .borderline .activeline');
    var activetabitem = $('.tabheader  .tabitem.active');
    var width = activetabitem.innerWidth();
    var left = activetabitem.position().left;

    activeline.css({"left":left+'px',"width":width+'px'});

    // borderline.css({"left":left+'px',"width":tabheaderul.width()})
}




</script>